<template>
  <div class="user-page">
    <div class="user-info">
      <!-- 第一行 -->
      <div class="user-info-wrapper">
        <div class="info-content">
          <div class="avatar">
            <img src="https://file.ituring.com.cn/SmallAvatar/" alt="" />
          </div>
          <div class="reg-wrapper">
            <h3 class="name">{{ UserData.spaceInfo?.userNickName }}</h3>
            <p class="datetime">社区年龄 / {{ UserData.spaceInfo?.age }}年</p>
          </div>
        </div>
        <div class="oneself" @click="$router.push(`/space/${UserData.id}`)">
          个人主页
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 第二行 -->
      <div class="user-data">
        <div class="user-data-item" @click="$router.push(`/space/${UserData.id}`)">
          <p class="num">{{ UserData.spaceInfo?.articleCount }}</p>
          <p class="name">文章</p>
        </div>
        <div class="user-data-item" @click="$router.push(`/space/${UserData.id}`)">
          <p class="num">{{ UserData.spaceInfo?.articleCount}}</p>
          <p class="name">评论</p>
        </div>
        <div class="user-data-item">
          <p class="num">{{ UserData.spaceInfo?.voteCount }}</p>
          <p class="name">推荐</p>
        </div>
        <div class="user-data-item" @click="$router.push('/user/fav')">
          <p class="num">{{ UserData.spaceInfo?.favCount }}</p>
          <p class="name">收藏</p>
        </div>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="remind">
      <p class="remind-new" @click="$router.push('/user/notification')">
        新提醒
        <span v-show="isNotify" class="remind-num">+ {{NotifyData}}</span>
      </p>
      <img src="https://m.ituring.com.cn/img/biasLine.ccea6a13.svg" alt="" />
      <p class="remind-msg" @click="$router.push('/user/msg')">
        短消息
        <span v-show="isMsg" class="remind-num">+ {{MsgData}}</span>
    </p>
    </div>
    <!-- 单元格列表 -->
    <div class="cell-list-top">
      <van-cell
        size="large"
        title="拥有的书"
        is-link
        to="/user/owebook"
        icon="coupon-o"
      />
      <van-cell
        size="large"
        title="已购买课程"
        is-link
        to="/user/owecourse"
        icon="location-o"
      />
      <van-cell
        size="large"
        title="我的订单"
        is-link
        to="/user/order"
        icon="records"
      />
      <van-cell
        size="large"
        title="兑换书袋"
        is-link
        to="index"
        icon="bill-o"
      />
      <van-cell
        size="large"
        title="兑换记录"
        is-link
        to="index"
        icon="records"
      />
    </div>
    <div class="cell-list-center">
      <van-cell size="large" title="收藏夹" is-link to="/user/fav" icon="like-o" />
      <van-cell
        size="large"
        title="我的关注"
        is-link
        to="/user/follow"
        icon="like-o"
      />
      <van-cell
        size="large"
        title="我的银子"
        :value="UserData.yinzi + '两银子'"
        is-link
        to="index"
        icon="like-o"
      />
      <van-cell size="large" title="刮刮卡" is-link to="index" icon="like-o" />
    </div>
    <div class="cell-list-bottom">
      <van-cell
        size="large"
        title="个人设置"
        is-link
        to="index"
        icon="like-o"
      />
      <van-cell
        size="large"
        title="地址管理"
        is-link
        to="index"
        icon="like-o"
      />
    </div>
    <!-- 登出 -->
    <div class="user-return" @click="logOut">登出</div>
  </div>
</template>

<script>
import { UserPageAPI } from "@/apis/index";
export default {
  data() {
    return {
      UserData: {},
      NotifyData: 0,
      MsgData: 0,
    };
  },
  computed:{
    isNotify(){
        if(this.NotifyData == 0){
            return false;
        }else{
            return true;
        }
    },
    isMsg(){
        if(this.MsgData == 0){
            return false;
        }else{
            return true;
        }
    },
  },
  mounted() {
    this.getUserPage();
    this.$emit('setactive',3)

  },
  methods: {
    async getUserPage() {
      // 主要网络请求
      let { data } = await this.$http(UserPageAPI, {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      console.log(data);
      this.UserData = data;
      // 网络请求(新通知)
      let data1  = await this.$http("/api/User/Check/NewNotification", {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.NotifyData = data1.data.count;
      // 网络请求(短消息)
      let data2 = await this.$http(`/api/User/Check/NewMessage`, {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.MsgData = data2.data.count;
    },
    // 退出登录
    logOut(){
      // 清除token
      localStorage.removeItem('token')
      this.$router.replace('/')
    }
  },
};
</script>

<style lang="scss" scoped>
.user-page {
  background-color: var(--more-bg-white);
  margin-bottom: 50px;
  .user-info {
    background-color: #fff;
    .user-info-wrapper {
      margin: 35px 15px 0 15px;
      display: flex;
      justify-content: space-between;
      .info-content {
        display: flex;
        padding-bottom: 25px;
        .avatar {
          img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
          }
        }
        .reg-wrapper {
          margin-left: 20px;
          h3.name {
            color: var(--book-name-font-black);
            font-size: 20px;
            line-height: 26px;
          }
          p.datetime {
            color: var(--more-font-grey);
            font-size: 14px;
            margin-top: 5px;
          }
        }
      }
      .oneself {
        color: #fff;
        font-size: 14px;
        margin-right: 2px;
        padding: 5px;
        height: 24px;
        background-color: var(--theme-blue);
        border-radius: 999px;
      }
    }
    .user-data {
      display: flex;
      justify-content: space-around;
      border-top: 1px solid #f8f8f8;
      .user-data-item {
        padding: 15px 30px;
        .num {
          color: var(--theme-blue);
          font-size: 16px;
          line-height: 22px;
          text-align: center;
        }
        .name {
          color: var(--more-font-grey);
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          margin-top: 1px;
        }
      }
    }
  }
  .remind {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 16px 0;
    margin: 10px 0 0;
    .remind-new {
      color: var(--theme-blue);
      font-size: 16px;
      margin-left: 30px;
      .remind-num {
        color: var(--more-font-grey);
        font-size: 14px;
        margin-left: 6px;
      }
    }
    .remind-msg {
      color: var(--theme-blue);
      font-size: 16px;
      margin-right: 20px;
    }
    .remind-num {
        color: var(--more-font-grey);
        font-size: 14px;
        margin-left: 6px;
      }
  }
  .cell-list-top,
  .cell-list-center,
  .cell-list-bottom {
    background-color: #fff;
    margin-top: 10px;
    padding: 0 15px;
    .van-cell {
      padding: 15px 0;
      .van-cell__title {
        margin-left: 15px;
      }
      .van-cell__value {
        margin-right: 15px;
      }
    }
  }
  .user-return {
    background-color: #fff;
    color: #f00;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 0;
    text-align: center;
    margin: 15px 0;
  }
}
</style>